<template>
  <div>
    <DynamicTable
      row-key="sn"
      :data-request="loadData"
      :columns="columns"
      :search="false"
      bordered
      size="small"
    />
  </div>
</template>

<script lang="ts" setup>
  import { watch } from 'vue'
  import { useTable, type TableColumn } from '@/components/core/dynamic-table'
  import action from '@/api/product/workOrder'

  defineOptions({
    name: 'ProductSnList',
  })

  const props = defineProps({
    id: {
      type: Number,
      required: true,
    },
  })
  const [DynamicTable, dynamicTableInstance] = useTable()

  const loadData = async (params: API.PageParams) => {
    params.id = props.id
    const data = await action.getProductSnList(params)
    return data
  }

  watch(
    () => props.id,
    async newVal => {
      newVal && dynamicTableInstance.reload()
    },
    { immediate: false },
  )

  const columns: TableColumn[] = [
    {
      title: '序列号',
      dataIndex: 'sn',
      width: 120,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 120,
    },
  ]
</script>

<style lang="less" scoped></style>
